<template>
  <div class="teacher-list-container">
    <!-- 顶部导航 -->
    <header class="header">
      <button class="back-btn" @click="goBack">
        <span class="back-icon">‹</span>
        返回
      </button>
    </header>

    <!-- 主要内容 -->
    <main class="main-content">
      <!-- 页面标题 -->
      <h1 class="page-title">教师队伍</h1>
      
      <!-- 搜索功能 -->
      <div class="search-section">
        <div class="search-container">
          <input 
            v-model="searchKeyword" 
            type="text" 
            placeholder="可以搜索教师姓名、工号"
            class="search-input"
            @input="handleSearch"
            @keyup.enter="handleSearch"
          />
          <button class="search-btn" @click="handleSearch">🔍</button>
        </div>
      </div>

      <!-- 教师列表 -->
      <div class="teacher-list">
        <div class="list-header">
          <div class="header-item">工号</div>
          <div class="header-item">姓名</div>
          <div class="header-item">专业职称</div>
          <div class="header-item">联系电话</div>
        </div>
        
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <div class="loading-text">正在加载教师信息...</div>
        </div>

        <!-- 教师列表项 -->
        <div v-else class="teacher-items">
          <div 
            v-for="teacher in teachers" 
            :key="teacher.teacherId"
            class="teacher-item clickable"
            @click="goToTeacherDetail(teacher)"
          >
            <div class="teacher-info">
              <span class="teacher-employee-id">{{ teacher.employeeId }}</span>
            </div>
            <div class="teacher-info">
              <span class="teacher-name">{{ teacher.realName }}</span>
            </div>
            <div class="teacher-info">
              <span class="teacher-title">{{ teacher.professionalTitle || '暂无' }}</span>
            </div>
            <div class="teacher-info">
              <span class="teacher-phone">{{ teacher.phone || '暂无' }}</span>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="!loading && teachers.length === 0" class="empty-state">
          <div class="empty-icon">👨‍🏫</div>
          <div class="empty-text">暂无符合条件的教师</div>
          <div class="empty-hint">请尝试调整搜索条件</div>
        </div>
      </div>
    </main>

    <!-- 消息提示弹窗 -->
    <div v-if="showMessageModal" class="modal-overlay" @click="closeMessageModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header error-header">
          <h3>加载失败</h3>
          <button class="close-btn" @click="closeMessageModal">×</button>
        </div>
        <div class="modal-body">
          <div class="icon-wrapper">
            <div class="message-icon error-icon">✗</div>
          </div>
          <p class="modal-text">{{ errorMessage }}</p>
        </div>
        <div class="modal-footer">
          <button class="confirm-btn" @click="closeMessageModal">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getAllTeachersService, searchTeachersService } from '@/api/teacher.js'

const router = useRouter()

// 响应式数据
const searchKeyword = ref('') // 搜索关键词
const loading = ref(false) // 加载状态
const showMessageModal = ref(false) // 消息提示弹窗
const errorMessage = ref('') // 错误信息

// 教师数据（从API获取）
const teachers = ref([])

// 计算属性：过滤后的教师列表
const filteredTeachers = computed(() => {
  if (!searchKeyword.value.trim()) {
    return teachers.value
  }
  
  const keyword = searchKeyword.value.toLowerCase()
  return teachers.value.filter(teacher => 
    teacher.realName.toLowerCase().includes(keyword) ||
    teacher.employeeId.toLowerCase().includes(keyword)
  )
})

// 处理搜索
const handleSearch = async () => {
  loading.value = true
  try {
    const result = await searchTeachersService(searchKeyword.value)
    if (result.code === 200) {
      teachers.value = result.data || []
      console.log('搜索教师成功:', teachers.value.length, '位教师')
    } else {
      console.error('搜索教师失败:', result.msg)
      showErrorMessage(result.msg || '搜索教师失败')
    }
  } catch (error) {
    console.error('搜索教师异常:', error)
    showErrorMessage('搜索教师时发生错误')
  } finally {
    loading.value = false
  }
}

// 页面挂载时的初始化
onMounted(() => {
  loadTeachers()
})

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 加载教师数据
const loadTeachers = async () => {
  loading.value = true
  try {
    const result = await getAllTeachersService()
    if (result.code === 200) {
      teachers.value = result.data || []
      console.log('教师数据加载成功:', teachers.value.length, '位教师')
    } else {
      console.error('加载教师数据失败:', result.msg)
      showErrorMessage(result.msg || '加载教师数据失败')
    }
  } catch (error) {
    console.error('加载教师数据异常:', error)
    showErrorMessage('加载教师数据时发生错误')
  } finally {
    loading.value = false
  }
}

// 显示错误消息
const showErrorMessage = (text) => {
  errorMessage.value = text
  showMessageModal.value = true
}

// 关闭消息弹窗
const closeMessageModal = () => {
  showMessageModal.value = false
}

// 跳转到教师详情页面
const goToTeacherDetail = (teacher) => {
  const employeeId = teacher.employeeId
  
  if (!employeeId) {
    showErrorMessage('教师工号信息缺失')
    return
  }
  
  router.push({
    name: 'TeacherDetail',
    params: { employeeId: employeeId }
  })
}
</script>

<style scoped>
@import '@/assets/css/teacher-list.css';
</style> 